<template>
  <div class="min-h-screen flex flex-col" :class="{ 'dark': themeStore.isDark }">
    <!-- <Header /> -->

    <MainLayout>
      <template #main-bars>
        <MainBars>
          <Bars @action-triggered="handleBarAction" />
        </MainBars>
      </template>
      <template #left-panel>
        <LeftPanel ref="leftPanelRef" />
      </template>

      <template #main-content>
        <MainContent>
          <router-view></router-view>
        </MainContent>
      </template>

      <template #right-panel>
        <RightPanel>
          Right Panel
        </RightPanel>
      </template>
    </MainLayout> 

    <Footer />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useThemeStore } from '@/stores/theme'
import { useNavigationStore } from '@/stores/navigation'
import Header from '@/components/layout/Header.vue'
import Footer from '@/components/layout/Footer.vue'
import MainBars from '@/components/layout/MainBars.vue'
import MainLayout from '@/components/layout/MainLayout.vue'
import LeftPanel from '@/components/layout/LeftPanel.vue'
import MainContent from '@/components/layout/MainContent.vue'
import RightPanel from '@/components/layout/RightPanel.vue'

import Bars from '@/components/Bars.vue'

// Theme store
const themeStore = useThemeStore()

// Navigation store 
const navigationStore = useNavigationStore()

// Reference to the LeftPanel component
const leftPanelRef = ref(null)

// User menu control
const isUserMenuOpen = ref(false)
const toggleUserMenu = () => {
  isUserMenuOpen.value = !isUserMenuOpen.value
}

// Close user menu when clicking outside
const closeUserMenu = (e) => {
  if (!e.target.closest('.relative')) {
    isUserMenuOpen.value = false
  }
}

// Handle actions triggered from the Bars component
const handleBarAction = (action) => {
  console.log('Action triggered from Bars:', action)
  
  // Handle specific actions
  switch(action) {
    case 'document':
      // Handle document action (e.g., open a document modal)
      console.log('Opening document panel/modal')
      break
    case 'settings':
      // Handle settings action (e.g., open settings modal)
      console.log('Opening settings panel/modal')
      break
  }
}

// Mock user data
const user = {
  name: 'John Doe'
}

onMounted(() => {
  themeStore.initializeTheme()
  const cleanup = themeStore.watchSystemTheme()
  document.addEventListener('click', closeUserMenu)
  
  // Set default navigation
  navigationStore.setActive(1)
  
  // Cleanup
  onUnmounted(() => {
    cleanup()
    document.removeEventListener('click', closeUserMenu)
  })
})
</script>

<style>
/* Dark mode transitions */
.dark * {
  transition-property: background-color, border-color, color;
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
}
</style>